import React, { useState, useEffect, useRef } from 'react';
import { useRoutes, useNavigate, Outlet, useLocation } from 'react-router-dom'
import { Button, Col, Form, Input, InputNumber, message, Modal, Row, Table, } from 'antd';
import PuilTabel from '../../components/puilTabel'
import { getList } from '../../api/index'

const Home = (props) => {
  const [data, setData] = useState([])
  const [isModalOpen, setIsModalOpen] = useState(false)
  const [confirmLoading, setConfirmLoading] = useState(false)
  const [listVal, setListVal] = useState();
  const [loading, setLoading] = useState(false);
  const [formVal, setFormVal] = useState();
  const [selectedRowKeys, setSelectedRowKeys] = useState([])
  const [pageSize, setpageSize] = useState(5);
  const [pageNumber, setpageNumber] = useState(1);


  function getHomeData() {
    getList('/getHomeDate').then((res) => {
      // console.log(res.data.list);
      setData(res.data.list)
    })
  }

  useEffect(() => {
    getHomeData()
  }, [])

  const btnOpen = () => {
    setIsModalOpen(true)
  }
  const handleOk = async () => {
    handleCancel();
  };
  // 返回
  const handleCancel = () => {
    setIsModalOpen(false);
  };
  const onFinish = (values) => {
    console.log('Received values from form: ', values);
    setFormVal(values);
  };
  const onListVal = (val, value) => {
    setFormVal(val);
    setLoading(true);
    // let son = data
    let pageNumberVal = value ? value : pageNumber;
    if (value) {
      pageNumber = Number(value);
    }
  };

  const [selectedItems, setSelectedItems] = useState([])
  const handleCheckboxChange = (record) => {
    const updatedItems = data.map((item) => {
      if (item.id === record.id) {
        return { ...item, selected: !item.selected }; // 切换选中状态  
      }
      return item;
    });
    setSelectedItems(updatedItems); // 更新选中的数据项状态  
  };

//表tou参数
const columns = [ // 表头列定义，包括校验规则和其他自定义逻辑（根据实际需求进行调整）  
{
  title: '', // 单选框列的标题  
  dataIndex: 'selected', // 单选框列的字段名，可以根据实际情况自定义  
  key: 'selected',
  render: (text, record) => {
    const isSelected = record.selected;
    return (
      <div style={{ display: 'flex', justifyContent: 'center' }}>
        <input type="checkbox" checked={isSelected} onChange={() => handleCheckboxChange(record)} />
      </div>
    );
  }
},
{ title: '姓名', titleColSpan: 2, dataIndex: 'name', key: 'name' },
{ title: '课程', dataIndex: 'desk', key: 'desk', },
{
  title: '操作', // 按钮列的标题  
  dataIndex: 'operation', // 按钮列的字段名，可以根据实际情况自定义  
  key: 'operation',
  render: (text, record) => (
    <div>
      <Button onClick={deleteBtn}>操作</Button>
    </div>
  ),
},
// rules: [{ minLength: 18, message: '年龄必须大于等于18岁' }, 
// { maxLength: 100, message: '年龄不能超过100岁' }] },
// 其他列定义...  
];
//删除
const deleteBtn=()=>{
  console.log(111);
}

const onSelectChangeVal = (val) => {
  console.log(val);
  setSelectedRowKeys(val);
};




  return (
    <div id='homeWarp'>
      <Button onClick={btnOpen}>弹框</Button>
      <Modal
        width={540}
        title="分享"
        open={isModalOpen}
        // onOk={handleOk}
        onCancel={handleCancel}
        confirmLoading={confirmLoading}
        footer={false}
      >
        <Form
          name="customized_form_controls"
          layout="inline"
          onFinish={onFinish}
        >
          <Col span={20}>
            <Form.Item name="price">
              <Input allowClear placeholder="请输入客户关键字搜索" />
            </Form.Item>
          </Col>
          <Col span={2} style={{ marginLeft: '-1.7%' }}>
            <Form.Item>
              <Button className="buttom" type="primary" htmlType="submit">
                搜索
              </Button>
            </Form.Item>
          </Col>
        </Form>
        <div style={{ marginTop: '10px' }}>
            // TODO 表格
            <PuilTabel
              columns={columns}
              data={data}
              pageNumber={pageNumber}
              pageSize={pageSize}
              total={data.length}
              onListVal={onListVal}
              // listVal={data} // 待改
              formVal={formVal}
              onSelectChangeVal={onSelectChangeVal}
              loading={loading}  
              rowSelectionBool={true}  // 控制复选框
              paginationBool={true} // 控制要不要分页
            ></PuilTabel>

            <Row justify="end" style={{ display: data ? 'flex' : 'none' }}>
              <Button
                className="buttom"
                htmlType="submit"
                onClick={handleCancel}
                style={{ marginRight: '10px' }}
              >
                返回
              </Button>
              <Button className="buttom" type="primary" onClick={handleOk}>
                分享
              </Button>
            </Row>
          </div>
      </Modal>
    </div>
  );
}
export default Home;
